<template>
  <div v-if="walletShow.showRecharge" class="overlay">
    <div
      class="bg-[#1a2c38] m-auto text-white rounded-xl shadow-lg max-w-[440px] w-full pcMaxh"
    >
      <div
        class="flex justify-between rounded-t-lg items-center p-2 bg-[#2f4553]"
      >
        <div></div>
        <div class="p-1">
          {{ $t("layer.wallet.save") }}
        </div>

        <div @click="closeProp">
          <close />
        </div>
      </div>

      <div class="p-4 h-full">
        <div v-if="showRechargeList == 'rechargeList'" class="h-full">
          <div
            class="p-2 Warning text-[#ff9203] md:text-sm rounded-lg mb-2"
            v-if="canRecharge == '1'"
          >
            {{ $t("layer.wallet.moreRechange") }}
          </div>
          <div class="bg-[#2f4553] rounded-lg p-2 pt-4">
            <div>
              {{ $t("layer.wallet.depositMethod") }}
            </div>
            <div class="rounded-md pt-1">
              <div
                class="bg-[#1f2937] p-4 pb-0 overflow-y-scroll h-full rounded-md rechargeData"
              >
                <div v-if="rechargeData.length">
                  <div
                    class="bg-[#2f4553] rounded-md p-2 flex justify-between mb-2"
                    v-for="(item, index) in rechargeData"
                    @click="goRecharge(item)"
                  >
                    <template v-for="(row, index) in item.scene_list">
                      <div>
                        <div>{{ item.channel_name }}</div>
                        <div class="text-xs text-[#c9d1e4] mt-2">
                          {{ $t("layer.wallet.rechargeAmount") }}：
                          {{ row.once_min_limit }} —— {{ row.once_max_limit }}
                        </div>
                      </div>
                      <!-- rate 百分比 -->
                      <!-- static 固定值 -->
                      <div
                        class="bgc_log text-xs"
                        v-if="item.reward.type != 'none'"
                      >
                        <span v-if="item?.reward?.type == 'static'">
                          + {{ item?.reward?.data?.value }}
                        </span>
                        <span v-if="item?.reward?.type == 'rate'">
                          {{ item?.reward?.data?.value }} %
                        </span>
                      </div>
                    </template>
                  </div>
                </div>

                <!-- offlineTransfer 线下充值 -->
                <div v-if="offlineTransfer.length">
                  <div
                    class="bg-[#2f4553] rounded-md p-2 flex justify-between mb-2"
                    v-for="(item, index) in offlineTransfer"
                    @click="goOfflineRecharge(item)"
                  >
                    <div>
                      <div class="">
                        {{ item.bank_name }} ({{ item.branch_name }})
                      </div>
                      <div class="text-xs text-[#c9d1e4] mt-2">
                        {{ $t("layer.wallet.rechargeAmount") }}：
                        {{ item.once_min_limit }} —— {{ item.once_max_limit }}
                      </div>
                    </div>
                    <!-- rate 百分比 -->
                    <!-- static 固定值 -->
                    <div class="bgc_log text-xs" v-if="showOfflineDiscount">
                      <span v-if="showOfflineDiscount.type == 'static'">
                        + {{ showOfflineDiscount.data.value }}
                      </span>
                      <span v-if="showOfflineDiscount.type == 'rate'">
                        {{ showOfflineDiscount.data.value }} %
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <rechargedetails
            @goBack="setGoBack"
            :rechargeMonyItem="rechargeMonyItem"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { mainWallet } from "@/store/wallet";
import rechargedetails from "./conponents/rechargedetails.vue";

/**
 *  rechargeList 充值列表
 *  rechargedetails 列表详情
 */
const showRechargeList = ref("rechargeList");
const walletShow = mainWallet();
const closeProp = () => {
  walletShow.showRecharge = false;
};

const rechargeMonyItem = ref(null);
const goRecharge = (item: any) => {
  if (canRecharge.value == "1") return;
  rechargeMonyItem.value = item;
  showRechargeList.value = "rechargedetails";
};

// 单独处理线下转账逻辑
const goOfflineRecharge = item => {
  if (canRecharge.value == "1") return;
  rechargeMonyItem.value = {
    ...item,
    type: "offlineTransfer",
    channel_name: item.bank_name,
    reward: {
      ...showOfflineDiscount.value
    },
    scene_list: [
      {
        once_min_limit: item.once_min_limit,
        once_max_limit: item.once_max_limit
      }
    ]
  };
  showRechargeList.value = "rechargedetails";
  console.log("rechargeMonyItem", rechargeMonyItem.value);
};

const setGoBack = type => {
  showRechargeList.value = type;
};

const rechargeData = ref([]); // 线上充值
const offlineTransfer = ref([]); // 线下充值
const showOfflineDiscount = ref(null); // 是否显示线下优惠
const canRecharge = ref("0"); // 充值锁定 0可以充值 、1不能充值

const show = ref(false);
watch(
  () => walletShow.showRecharge,
  val => {
    if (val) {
      show.value = true;
      canRecharge.value =
        walletShow.banckDetails?.user_locked_info.deposit_locked;
      showRechargeList.value = "rechargeList";
      rechargeData.value = walletShow.banckDetails?.deposit_online_channel_list;
      offlineTransfer.value =
        walletShow.banckDetails?.deposit_offline_bank_list;

      if (walletShow.banckDetails?.deposit_offline_bank_reward.type != "none") {
        showOfflineDiscount.value =
          walletShow.banckDetails?.deposit_offline_bank_reward;
      }
      document.body.style.overflow = "hidden";
    } else {
      show.value = false;
      document.body.style.overflow = "";
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
@media screen and (min-width: 601px) {
  .banck_box {
    display: flex;
    justify-content: center;
  }
}
.van-overlay {
  display: flex;
}
.activeClass {
  color: #1475e1;
  background-color: #2f4553;
}
.Warning {
  border-radius: 2px;
  border: dashed 1px #ff9203;
}
.bgc_log {
  width: 48px;
  height: 14px;
  display: flex;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  background: url("@/assets/right_log.png") no-repeat;
  background-size: 100% 100%;
}

@media screen and (min-width: 601px) {
  .rechargeData {
    max-height: 430px;
  }
}

@media screen and (max-width: 600px) {
  .rechargeData {
    max-height: 366px;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1011;
}

.overlay-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>
